<template>
	<view class="content">
		<!-- <view class="myX">
			<view class="Xtitle">填写个人信息</view>
		</view> -->
		<view class="box">
			<u-field v-model="form.name" label="姓名" input-align="right" required placeholder="输入姓名"
				:border-bottom="true" placeholder-style="color: #C1C1C1;"></u-field>
				
				<!-- 性别 -->
			<view class="hosp_sp" @click="showAction">
				<view class="hosp_sp_left">
					<span style="color: #fa3534;font-size: 32rpx;padding-right: 15rpx;">*</span> 性别
				</view>
				<view class="hosp_sp_right" style="display: flex;align-items: center;">
						<span v-if="sex.length == 0">选择性别</span>
						<span v-if="sex.length > 0" style="color: #333;">{{sex}}</span>
						<view class="">
							<u-icon name="arrow-right" color="#c0c4cc" szie="13" style="padding-left: 20rpx;"></u-icon>
						</view>
				</view>
			</view>
			
				<!-- 医院 -->
			<view class="hosp_sp">
				<view class="hosp_sp_left">
					<span style="color: #fa3534;font-size: 32rpx;padding-right: 15rpx;">*</span> 医院
				</view>
				<view class="hosp_sp_right" style="color: #666;">
					{{form.hosp}}
					<u-icon name="arrow-right" color="#c0c4cc" szie="13" style="padding-left: 20rpx;"></u-icon>
				</view>
			</view>


			<!-- 科室 -->
			<view class="hosp_sp" @click="keshi = true">
				<view class="hosp_sp_left">
					<span style="color: #fa3534;font-size: 32rpx;padding-right: 15rpx;">*</span> 科室
				</view>
				<view class="hosp_sp_right" style="display: flex;align-items: center;">
						<span v-if="dep.length == 0">选择科室</span>
						<span v-if="dep.length > 0" style="color: #333;">{{dep}}</span>
						<view class="">
							<u-icon name="arrow-right" color="#c0c4cc" szie="13" style="padding-left: 20rpx;"></u-icon>
						</view>
				</view>
			</view>
			
			<view class="hosp_sp" @click="zhicheng = true">
				<view class="hosp_sp_left">
					<span style="color: #fa3534;font-size: 32rpx;padding-right: 15rpx;">*</span> 职称
				</view>
				<view class="hosp_sp_right" style="display: flex;align-items: center;">
						<span v-if="job.length == 0">选择职称</span>
						<span v-if="job.length > 0" style="color: #333;">{{job}}</span>
						<view class="">
							<u-icon name="arrow-right" color="#c0c4cc" szie="13" style="padding-left: 20rpx;"></u-icon>
						</view>
				</view>
			</view>
			
			
		<!-- 	<u-field v-model="job" @click="zhicheng = true" input-align="right" :disabled="true" label="职称"
				placeholder="选择职称" right-icon="arrow-right" required :border-bottom="true"
				placeholder-style="color: #C1C1C1;">
			</u-field> -->
			<!-- 性别下拉菜单 -->
			<u-select v-model="show" :list="list" @confirm="SexConfirm" confirm-color="#4DC0D9"
				:safe-area-inset-bottom="true"></u-select>
			<u-select v-model="keshi" :list="depList" @confirm="DepConfirm" confirm-color="#4DC0D9"
				:safe-area-inset-bottom="true"></u-select>
			<u-select v-model="zhicheng" :list="JobList" @confirm="JobConfirm" confirm-color="#4DC0D9"
				:safe-area-inset-bottom="true"></u-select>
			<view class="avatar" @click="chooseAvatar">
				<view class="p-l-24 lg">
					头像
				</view>
				<view class="av_img">
					<view class="img_box">
						<u-avatar :src="avatar" size="120"></u-avatar>
					</view>
					<view class="p-r-28">
						<u-icon name="arrow-right" color="#c0c4cc" szie="13"></u-icon>
					</view>
				</view>
			</view>
			<view class="login_button" @click="toUser">
				<view class="login_but_style" v-if="!actives">
					保存信息
				</view>
				<view class="login_but_style active" v-if="actives">
					保存信息
				</view>
			</view>
		</view>
		<view class="">
			<u-modal v-model="succ" :show-title="false" :content-style="{'fontWeight': 'bold'}" content="恭喜您已创建数字医生工作室" confirm-text="查看您的医生专属码" confirm-color="#4DC0D9"
				@confirm="confirmSucc" >
			</u-modal>
		</view>
		<!-- <view class="u-avatar-wrap">
			<image class="u-avatar-demo" :src="avatar" mode="aspectFill"></image>
		</view>
		<u-button @click="chooseAvatar">进入裁剪页</u-button> -->
	</view>
</template>

<script>
	import {
		zhicheng,
		userInfoPost,
		getDepList,
		getInfo
	} from '@/api/index.js'
	import {
		baseURL
	} from '@/config/app'
	export default {
		data() {
			return {
				placeholder: '"color": "red"',
				form: {
					name: '',
					sex: '',
					hosp: '',
					dep: '', //科室
					job: '', //职称
				},
				sex: '',
				dep: '', //科室
				job: '', //职称
				depList: [{
						value: '1',
						label: '精神科'
					},
					{
						value: '2',
						label: '耳鼻喉'
					},
					{
						value: '3',
						label: '眼科'
					}
				],
				JobList: [
					// {
					// 	value: '1',
					// 	label: '主任医师'
					// },
					// {
					// 	value: '2',
					// 	label: '副主任医师'
					// },
					// {
					// 	value: '3',
					// 	label: '住院医师'
					// }
				],
				list: [{
						value: '0',
						label: '男'
					},
					{
						value: '1',
						label: '女'
					},
					// {
					// 	value: '2',
					// 	label: '未知'
					// }
				],
				show: false, //性别
				keshi: false, //科室
				zhicheng: false, //职称
				//avatar: '',
				//actives:false,   //展示哪个按钮，没填暗淡，填了更绿
				avatar: require('@/static/img/default_avatar.png'),
				filePath: '', //
				myX: require('@/static/img/myX.png'),
				succ: false //保存信息成功后的弹窗
			}
		},
		computed: {
			actives() {
				// console.log(
				// 	this.form.name.length > 0,
				// 	this.form.sex.length > 0,
				// 	this.form.hosp.length > 0,
				// 	this.form.dep.length > 0,
				// 	this.form.job.length > 0
				// );
				let dep = this.form.dep.toString()
				//console.log(this.form.dep.length)
				//this.form.hosp.length > 0 &&
				if (this.form.name.length > 0 && this.form.sex.length > 0 &&
					dep.length > 0 && this.form.job.length > 0) {
					return true
				}
				return false
			}
		},
		// async onLoad() {

		// 	console.log(res,'zhicheng');
		// },
		onLoad() {
			// let local = uni.getStorageSync('userinfo')
			// if(local?.user?.deptId){
			// 	 this.$u.route('/pages/index/index?to=0')  //去首页
			// 	 return
			// }
			//console.log(local?.user?.phonenumber !== undefined);
			this.getJobList()
			// 监听从裁剪页发布的事件，获得裁剪结果
		},
		methods: {
			confirmSucc(){ //保存信息成功后跳转
				uni.navigateTo({
					url:'/pages/login/qr'
				})
			},
			async getJobList() {
				// let that = this
				let res = await zhicheng('user_title') //职称列表
				this.JobList = res.data.map((v) => {
					return {
						value: v.dictValue,
						label: v.dictLabel
					}
				})
				//	console.log(this.JobList); 
				this.DepList() //获得科室列表
				this.getHosp() //获得医院
				uni.$on('uAvatarCropper', path => {
					this.avatar = path;

					//console.log(path);
					// 可以在此上传到服务端
					uni.uploadFile({
						url: `${baseURL}/common/commonFileUpload`,
						filePath: path,
						name: 'file',
						complete: (res) => {
							if (res.statusCode == 200) {
								let data = JSON.parse(res.data)
								this.avatar = data.url
								this.filePath = data.filePath
							} else {
								this.$u.toast('上传文件错误，请稍后上传')
							}
						}
					});
				})
			},
			async getHosp() {
				let res = await getInfo()
				// if (res.user.deptId) {
				// 	this.$u.route('/pages/index/index?to=0') //去首页
				// }
				if (res.code == 200) {
					this.form.hosp = res.user.corpName
				}
				uni.setStorageSync('userinfo', {
					'permissions': res.permissions,
					'roles': res.roles,
					'user': res.user
				})
				//console.log(res,'hosp');
			},

			async DepList() {
				let res = await getDepList()
				this.depList = res.data.map((v) => {
					return {
						value: v.deptId,
						label: v.deptName
					}
				})
				//console.log(res,this.depList,'dep');
			},
			showAction() { //打开性别菜单
				this.show = true;
			},
			SexConfirm(e) {
				//console.log(e);
				this.sex = e[0].label //性别显示
				this.form.sex = e[0].value
				//	console.log(e);
			},
			DepConfirm(e) {
				this.dep = e[0].label //科室显示
				this.form.dep = e[0].value
				//console.log(e);
			},
			JobConfirm(e) {
				this.job = e[0].label //职称显示
				this.form.job = e[0].value
				//console.log(e);
			},
			chooseAvatar() {
				//console.log(123);
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			isPass() {
				if (this.form.name.length < 1) {
					this.$u.toast('请填写姓名')
					return false
				}
				if (this.form.sex.length < 1) {
					this.$u.toast('请选择性别')
					return false
				}
				// if (this.form.hosp.length < 1) {  //保存接口不用，所以也不校验了
				// 	this.$u.toast('请选择医院')
				// 	return false
				// }
				if (this.form.dep.length < 1) {
					this.$u.toast('请选择科室')
					return false
				}
				if (this.form.job.length < 1) {
					this.$u.toast('请选择职称')
					return false
				}
				return true
			},
			async toUser() {
				if (!this.isPass()) return
				let params = {
					//'avatar': this.avatar,
					'deptId': this.form.dep,
					'nickName': this.form.name,
					'sex': this.form.sex,
					'userTitle': this.form.job,
				}
				if (this.filePath) {
					params.avatar = this.filePath
				}
				//console.log(params);
				//return
				let res = await userInfoPost(params)
				if (res.code == 200) {
					uni.setStorageSync('zhichengName', this.job)
					// uni.switchTab({
					// 	url: '/pages/index/my'
					// })
					this.succ = true
				}
				//
			},
			close() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			// clickItem(index) {
			// 	this.sex = this.sexList[index].text;
			// }
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-field__input-wrap {
		color: #333;
		font-size: 32rpx !important;
	}

	::v-deep .u-required::before {
		left: -26rpx !important;
	}

	::v-deep .u-label-text {
		font-family: PingFang SC, PingFang SC;
		//font-weight: 500;
		font-size: 32rpx;
		color: #212121;
		line-height: 38rpx;
	}

	.content {
		background-color: #F8F8F8;

		.myX {
			//padding-top: 110rpx;
			padding-left: 48rpx;
			display: flex;
			background-color: white;
			padding-bottom: 22rpx;

			.Xtitle {
				padding-left: 200rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
			}
		}

		.box {
			background-color: white;
			margin-top: 20rpx;
			padding-left: 24rpx;

			.avatar {
				//border-bottom: 1px solid rgb(228, 231, 237);
				border-bottom: 1px solid #F8F8F8;
				display: flex;
				align-items: center;

				.av_img {
					flex: 1;
					padding-left: 100rpx;
					padding-top: 30rpx;
					padding-bottom: 30rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.img_box {
						margin-right: 10rpx;
						// width: 120rpx;
						// height: 120rpx;
					}
				}
			}

			.hosp_sp {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 28rpx 20rpx 0;
				border-bottom: 1px solid #F8F8F8;

				.hosp_sp_left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
				}

				.hosp_sp_right {
					color: #C1C1C1;
					font-size: 32rpx;
					line-height: 1.5;
				}
			}

			.login_button {
				margin-top: 80rpx;
				padding-right: 24rpx;

				.login_but_style {
					width: 100%;
					height: 84rpx;
					background: #A6DFEC;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
				}
			}

			.active {
				background-color: #4DC0D9 !important;
			}
		}
	}

	.wrap {
		padding: 40rpx;
	}

	.u-avatar-wrap {
		margin-top: 80rpx;
		overflow: hidden;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.u-avatar-demo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100rpx;
	}
</style>